
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import * as Actions from '../../actions/user'
import Header from '../../components/Header'
import utils from '../../utils'



class Login extends Component{
  static contextTypes={
    router:PropTypes.object.isRequired,
  }
  constructor(props) {
    super(props);
  
    this.state={
      userName : '',
      password    : '',
      code:''
    }
  }
  componentDidMount(){
    //获取图片验证码
    this.onChangeImg() 

   
  }
  onTextChange(type,e){
    this.setState({
      [type]:e.target.value
    })
  }
  onChangeImg(){
    let {actions} = this.props
    actions.getLoginImgCode({},(res)=>{

      
    })
  }
  //登陆
  submit(){
    let {actions,captcha,params} = this.props
    let {userName,password,code} =this.state
    if(userName.trim() ==''){
      utils.msg({text:'Please enter the account number',code:0})
      return
    }
    if(password.trim().lenght <6){
      utils.msg({text:'password (6+ characters)',code:0})
      return
    }
    if(code.trim().lenght < 5){
      utils.msg({text:'Please enter the picture verification code',code:0})
      return
    }
    let data={
      img_otp:code,
      login_name:userName,
      password:utils.encrypt_js(password),
      cookie:captcha.cookie,
      func:'user-login'
    }
    actions.login(data,{callback:(res)=>{
        if(res.code ==200){
          localStorage.setItem('userName', res.data.login_name);
          localStorage.setItem('Authorization', res.data.token);
          localStorage.setItem('userId', res.data.user_id);
          if(params.isRedirect == 'true'){
            this.context.router.history.replace('/home')
          }else{
            this.context.router.history.goBack()
        }
        }
        
        
      }
    })
  }
 
  render(){
    let {userName,password,code} = this.state
    let {captcha} =this.props
    return(
      <div>
        <Header title={'Login'} />
        <div className="login-container common-container">
          <div  className="login-wrap">
            <div className="input-container">
                {/*<div className="txt-username">account</div>*/}
                <input placeholder="Email (phone for mobile accounts)" className="acc-input" type="text" value={userName} onChange={this.onTextChange.bind(this,'userName')}  />
            </div>
            <div className="input-container">
                {/*<div className="txt-password">password</div>*/}
                <input placeholder="password" type="password" className="acc-input" value={password} onChange={this.onTextChange.bind(this,'password')}   />
                
            </div>
            <div  className="input-container" >
                {/*<div className="txt-imgverify">code</div>*/}
                <input placeholder="verification code" className="acc-input imgverify" type="text" value={code} onChange={this.onTextChange.bind(this,'code')} />
                <span className="code-box" onClick={this.onChangeImg.bind(this)}><img  className="J_ping" src={captcha.path}/></span>
            </div>
            <div className="clicktxt blue" onClick={this.onChangeImg.bind(this)}>
            Change the image
            </div>
            
            <div className='btn btn-active loginBtn' onClick={this.submit.bind(this)}>Sign in</div>
            <div className="subtext-wrap">
              <span className='blue'>Forgot password?</span>
              <span className='blue' onClick={()=>{
                this.context.router.history.push(`/register`);
              }}>Create an account.</span>
            </div>
          </div>
          <div className="quick-login">
            <h4 className="txt-otherLogin">Other way of landing</h4>
            <div className="type-otherLogin">
              <span><i className="iconfont icon-facebook"></i></span>
              <span><i className="iconfont icon-twitter"></i></span>
              <span><i className="iconfont icon-googleplus_F"></i></span>
              <span><i className="iconfont icon-instagram"></i></span>
            </div>
            
          </div>
        </div>

      </div>
    )
  }

  

}


function mapStateToProps(state){
  return {
    captcha:state.captcha.toJS()
  }
}
function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(Actions, dispatch)
  }
}
export default  connect(
  mapStateToProps,
  mapDispatchToProps
)(Login)
